<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制菱形(包含边框)</title>
  <style>
    #myCanvas {
      display: inherit;
      margin: 50px auto 0;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="myCanvas" width="800" height="500"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    console.log('Canvas宽度：', canvasWidth);
    console.log('Canvas高度：', canvasHeight);

    const devicePixelRatio = window.devicePixelRatio || 1;// 2
    console.log(29, 'devicePixelRatio', devicePixelRatio);

    // 设置canvas的CSS宽度和高度
    canvas.style.width = canvas.width + 'px';
    canvas.style.height = canvas.height + 'px';

    // 设置canvas的物理宽度和高度
    canvas.width = canvas.width * devicePixelRatio;
    canvas.height = canvas.height * devicePixelRatio;

    // 缩放绘图上下文，使其与物理像素一致
    ctx.scale(devicePixelRatio, devicePixelRatio);// 防止线条颜色失真
    // ctx.scale(0.5, 0.5);// 缩放一倍

    ctx.strokeStyle = 'rgba(0, 0, 0, 1)';
    ctx.lineWidth = 1; // 线条宽度

    // // 绘制表格的行
    // for (var i = 0; i < 17; i++) {
    //   ctx.beginPath();
    //   ctx.moveTo(0, (i + 1) * 30); // 行的起始点
    //   ctx.lineTo(canvasWidth, (i + 1) * 30); // 行的结束点
    //   ctx.stroke(); // 绘制行
    // }

    // // 绘制表格的列
    // for (var j = 0; j < 16; j++) {
    //   ctx.beginPath();
    //   ctx.moveTo((j + 1) * 50, 0); // 列的起始点
    //   ctx.lineTo((j + 1) * 50, canvasHeight); // 列的结束点
    //   ctx.stroke(); // 绘制列
    // }

    /* 
    绘制菱形，要求输入某个点位中心点位置，以中心点绘制任意宽度，动态输入边框宽度，颜色，菱形背景色(要求背景色区域是宽度减去边框后的)，并在中心点绘制一个的圆点，并且菱形颜色和小球的颜色支持动态参数输入，在菱形正下方某个距离的地方可以输出文字，也可以不输，文字整体居中，写出该函数,函数参数是对象方式传入
    
    */
    // 绘制菱形
    function drawDiamond({ centerX, centerY, width, borderWidth, borderColor, diamondColor, dotColor, dotSize, text, textOffset }) {
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // 计算菱形四个顶点的坐标
      const halfWidth = width / 2;
      // const points = [
      //   { x: centerX, y: centerY - halfWidth },
      //   { x: centerX + halfWidth, y: centerY },
      //   { x: centerX, y: centerY + halfWidth },
      //   { x: centerX - halfWidth, y: centerY }
      // ];

      const points = [
        { x: centerX, y: centerY - halfWidth - borderWidth },
        { x: centerX + halfWidth + borderWidth, y: centerY },
        { x: centerX, y: centerY + halfWidth + borderWidth },
        { x: centerX - halfWidth - borderWidth, y: centerY }
      ];

      // 绘制菱形背景
      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      ctx.lineTo(points[1].x, points[1].y);
      ctx.lineTo(points[2].x, points[2].y);
      ctx.lineTo(points[3].x, points[3].y);
      ctx.closePath();
      ctx.fillStyle = diamondColor;
      ctx.fill();

      // 绘制菱形边框
      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y);
      ctx.lineTo(points[1].x, points[1].y);
      ctx.lineTo(points[2].x, points[2].y);
      ctx.lineTo(points[3].x, points[3].y);
      ctx.closePath();
      ctx.lineWidth = borderWidth;
      ctx.strokeStyle = borderColor;
      ctx.stroke();

      // 绘制圆点
      ctx.beginPath();
      ctx.arc(centerX, centerY, dotSize, 0, Math.PI * 2);
      ctx.fillStyle = dotColor;
      ctx.fill();

      // 绘制文字
      if (text) {
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.fillStyle = 'black';
        ctx.fillText(text, centerX, centerY + halfWidth + textOffset + borderWidth);
      }
    }


    drawDiamond({
      centerX: 100,
      centerY: 100,
      width: 50,
      borderWidth: 1,
      borderColor: 'black',
      diamondColor: 'red',
      dotColor: 'blue',
      dotSize: 2,
    });

    drawDiamond({
      centerX: 200,
      centerY: 100,
      width: 50,
      borderWidth: 1,
      borderColor: 'black',
      diamondColor: 'red',
      dotColor: 'blue',
      dotSize: 2,
    });

    drawDiamond({
      centerX: 200,
      centerY: 200,
      width: 50,
      borderWidth: 2,
      borderColor: 'black',
      diamondColor: 'red',
      dotColor: 'blue',
      dotSize: 2,
      text: 'boxue is 666',
      textOffset: 20
    });
  </script>
</body>

</html>